import React from 'react'
import { Button } from 'antd'
import { SchemaForm, Item, Submit, Observer, Layout, SchemaType } from '@amazebird/antd-schema-form'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

function changePosition(array, sourceIndex, destinationIndex) {
  if (sourceIndex === destinationIndex) return array
  const copyArr = [...array]
  const source = copyArr[sourceIndex]
  copyArr.splice(destinationIndex, 0, source)
  const deleteIndex =
    sourceIndex > destinationIndex ? sourceIndex + 1 : sourceIndex
  copyArr.splice(deleteIndex, 1)
  return copyArr
}

const data = {
  users: ['张三', '李四']
}

const schema: SchemaType = {
  users: {
    type: 'array',
    label: '用户们',
    item: {
      label: Observer<string>({
        watch: ['users[]', 'test'],
        action: (users, { index }) => {
          console.log(users)
          return users ?? ''
        }
      }),
      component: 'Input',
      required: true,
    }
  }
}

function SimpleForm() {
  const form = SchemaForm.createForm()

  const onFinish = (formdata) => {
    console.info(formdata)
  }

  const onError = (errorInfos) => {
    console.error(errorInfos)
  }

  function onDragEnd(data) {
    const { source, destination } = data
    if (
      source.droppableId === destination.droppableId &&
      source.index !== destination.index
    ) {
      const fieldData = form.getFieldValue(['users'])
      const result = changePosition(fieldData, source.index, destination.index)
      form.setFields([{ name: ['users'], value: result }])
      dragDom.style.height = 'auto'
    }
  }
  let dragDom: any = null
  function onBeforeCapture() {
    dragDom.style.height = dragDom.offsetHeight + 'px'
  }
  return (
    <SchemaForm schema={schema} initialValues={data} form={form}>
      <Item field="users">
        {(fields, { add, remove, move }) => {
          console.log(fields)
          return (
            <>
              <div
                ref={(dom) => {
                  dragDom = dom
                }}
                style={{ display: 'block' }}
              >
                <DragDropContext
                  onDragEnd={onDragEnd}
                  onBeforeCapture={onBeforeCapture}
                >
                  <Droppable droppableId="users">
                    {(provided) => {
                      const { innerRef } = provided
                      return (
                        <div ref={innerRef} >
                          {
                            fields.map((field, index) => (
                              <Draggable
                                key={field.key}
                                draggableId={`${field.fieldKey}`}
                                index={index}
                              >
                                {
                                  (provided) => {
                                    return (
                                      <div
                                        key={field.key}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                      >
                                        <div style={{ display: 'flex', marginBottom: 8, alignItems: 'baseline' }} >
                                          <Item {...field} />
                                          <Button onClick={() => { remove(field.name) }}>删除</Button>
                                          <div {...provided.dragHandleProps}>拖动排序</div>
                                        </div>
                                      </div>
                                    )
                                  }
                                }
                              </Draggable>
                            ))}
                        </div>
                      )
                    }}
                  </Droppable>
                </DragDropContext>
              </div>
              <Button onClick={() => { add() }}>添加</Button>
            </>
          )
        }
        }
      </Item>
      <Layout offset={8}>
        <Submit type="primary" onFinish={onFinish} onError={onError} >保存</Submit>
      </Layout>
    </SchemaForm>
  )
}

export default SimpleForm
